.m-modal{
  display:inline-block;
  height: 300px;
  width: 500px;
  box-shadow: 0 0 6px v(shadow-default);
  background-color:v(background-white);
  box-sizing:border-box;
  display:none;
  transition: 0.3s;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  opacity:0;
  margin-top:-40px;
  z-index:101;
  border-radius:2px;
  &-head{
    display:table;
    width:100%;
    height: 52px;
    box-sizing: border-box;
    padding: 0 16px;
    border-bottom: 1px solid v(border-default);
  }
  &-title,
  &-append{
    display:table-cell;
    vertical-align: middle;
  }
  &-title{
    width: 100%;
    font-size: 16px;
    font-weight: bold;
  }
  &-append{
    white-space: nowrap;
    & > span{
      color: v(text-secondary);
      &:hover{
        color: v(color-primary);
      }
    }
  }
  &-body{
    height: 100%;
    padding: 16px;
  }
  &[visible]{
    opacity:1;
    margin:0;
  }
}